<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>每一点</title>

    <!-- Css (necessary Css) -->
    <link rel="stylesheet" th:href="${@mvcResourceUrlProvider.getForLookupPath('/assets/css/bootstrap.min.css')}"
          media="all">
    <link rel="stylesheet" th:href="${@mvcResourceUrlProvider.getForLookupPath('/assets/css/bootstrap-theme.css')}"
          media="all">
    <link rel="stylesheet"
          th:href="${@mvcResourceUrlProvider.getForLookupPath('/assets/css/language-selector-remove-able-css.css')}"
          media="all">
    <link rel="stylesheet" th:href="${@mvcResourceUrlProvider.getForLookupPath('/assets/css/flexslider.css')}"
          media="all">
    <link rel="stylesheet" th:href="${@mvcResourceUrlProvider.getForLookupPath('/assets/css/style.css')}" media="all">
    <link rel="stylesheet" th:href="${@mvcResourceUrlProvider.getForLookupPath('/assets/css/plugin.css')}" media="all">
    <link rel="stylesheet" th:href="${@mvcResourceUrlProvider.getForLookupPath('/assets/css/menu.css')}" media="all">
    <link rel="stylesheet" th:href="${@mvcResourceUrlProvider.getForLookupPath('/assets/css/responsive.css')}"
          media="all">
    <link rel="stylesheet" th:href="${@mvcResourceUrlProvider.getForLookupPath('/assets/css/color.css')}" media="all">
    <link rel="stylesheet" th:href="${@mvcResourceUrlProvider.getForLookupPath('/assets/css/iconmoon.css')}"
          media="all">
    <link rel="stylesheet" th:href="${@mvcResourceUrlProvider.getForLookupPath('/assets/css/themetypo.css')}"
          media="all">
    <link rel="stylesheet" th:href="${@mvcResourceUrlProvider.getForLookupPath('/assets/css/widget.css')}" media="all">
    <link rel="icon" th:href="${@mvcResourceUrlProvider.getForLookupPath('/ep/images/favicon.ico')}"
          type="image/x-icon"/>
    <link rel="stylesheet" th:href="${@mvcResourceUrlProvider.getForLookupPath('/layui/css/layui.css')}" media="all">
    <link rel="stylesheet" th:href="${@mvcResourceUrlProvider.getForLookupPath('/ep/css/eleTree.css')}" media="all">
    <!-- jQuery (necessary JavaScript) -->
    <script type="text/javascript"
            th:src="${@mvcResourceUrlProvider.getForLookupPath('/assets/scripts/jquery.js')}"></script>
    <script type="text/javascript"
            th:src="${@mvcResourceUrlProvider.getForLookupPath('/assets/scripts/bootstrap.min.js')}"></script>
    <script type="text/javascript"
            th:src="${@mvcResourceUrlProvider.getForLookupPath('/assets/scripts/modernizr.js')}"></script>
    <script type="text/javascript"
            th:src="${@mvcResourceUrlProvider.getForLookupPath('/assets/scripts/menu.js')}"></script>
    <script type="text/javascript"
            th:src="${@mvcResourceUrlProvider.getForLookupPath('/assets/scripts/jquery.flexslider-min.js')}"></script>
    <script type="text/javascript"
            th:src="${@mvcResourceUrlProvider.getForLookupPath('/assets/scripts/functions.js')}"></script>
    <script th:src="${@mvcResourceUrlProvider.getForLookupPath('/layui/layui.js')}"></script>
    <script th:src="${@mvcResourceUrlProvider.getForLookupPath('/ep/js/common/common.js')}"></script>
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>

    <![endif]-->
    <style>
        .ep-form-label {
            float: left;
            font-size: 20px;
            font-weight: bolder;
            display: block;
            line-height: 20px;
            text-align: right;
            margin-left: 10px;
            margin-right: 10px;
        }

        .ep-form-small_label {
            float: left;
            width: 200px;
            font-size: 16px;
            display: block;
            line-height: 20px;
            margin-left: 10px;
            margin-right: 10px;
        }

        .layui-input-block input {
            color: #0C0C0C;
            margin-right: 10px;
            width: 90%;
        }
        .bookNum span i{
            background-color: #DDDDDD;
            font-size: 25px;
            border-radius: 25px;
            cursor: pointer;
        }
    </style>
</head>
<body>
<!-- Header -->
<div th:replace="../templates/ep/front/crowd/header :: main-header"></div>
<!-- Header -->
<!-- body-->
<div class="layui-container" style="border: #DEE0E1  solid 1px;margin-top: 50px;margin-bottom: 200px">
    <div class="layui-row">
        <div class="layui-col-md8" style="border-right: #DEE0E1  solid 1px;">
            <div class="layui-row">
                <div class="layui-col-md8" style="padding-top: 30px">
                    <form class="layui-form" action="">
                        <label class="ep-form-label">确认订单信息:</label>
                        <div class="layui-form-item">
                            <label class="layui-form-label">回报档</label>
                            <div class="layui-input-block">
                                <input type="text" name="rid" data-th-value="${reward.id}" class="layui-input hidden">
                                <input type="text" name="support" data-th-value="${reward.support}" class="layui-input hidden">
                                <input type="text" name="title" readonly required autocomplete="off" class="layui-input"
                                       value="">
                            </div>
                        </div>
<!--                        <div class="layui-form-item">-->
<!--                            <label class="layui-form-label">数量</label>-->
<!--                            <div class="layui-input-block">-->
<!--                                <div class="bookNum">-->
<!--                                    <span style="margin-right: 10px;"><i class="layui-icon">&#xe67e;</i></span>-->
<!--                                    <input class="layui-input" style="width: 30%;" type="text" value="1" name">-->
<!--                                    <span><i class="layui-icon">&#xe624;</i></span>-->
<!--                                </div>-->
<!--                            </div>-->
<!--                        </div>-->
                        <div class="layui-form-item">
                            <label class="layui-form-label">打赏</label>
                            <div class="layui-input-block">
                                <input type="text" name="addedMoney" placeholder="￥0 你可以输入更多金额" autocomplete="off" value="0"
                                        class="layui-input">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">留言</label>
                            <div class="layui-input-block">
                                <input type="text" name="remark" placeholder="请输入你对项目的看法或要求" autocomplete="off"
                                       class="layui-input">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <div class="layui-input-block">
                                <button id="formDemoSub" style="background-color: #FE6500" class="layui-btn" lay-submit
                                        lay-filter="formDemo">提交订单
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        <div class="layui-col-md4">
            <div id="total" style="text-align: center;right: 50%;padding-top: 80px">
                <h1><i class="layui-icon">&#xe65e;</i><span>10</span></h1>
                <p>实际支付金额</p>
            </div>
        </div>
    </div>
</div>
<!--// CopyRight //-->
<div th:replace="../templates/ep/front/crowd/footer :: footer"></div>
<!--// CopyRight //-->

<script th:inline="javascript">
    layui.use(['upload', "layer", 'form', 'layedit'], function () {
        var upload = layui.upload
            , layer = layui.layer
            , form = layui.form
            , layedit = layui.layedit;

        var reward = [[${reward}]];
        $("input[name='title']").val("￥"+reward.support+" "+reward.title);
        //监听提交
        form.on('submit(formDemo)', function (data) {
            var param = data.field;
            var add = param.addedMoney;
            if (!((/^\d+$/).test(add))) {
                layer.msg('打赏金额需要为正整数(0~5000)', {icon: 5});
                return false;
            }
            if (add == "") {
                layer.msg('打赏金额应在0~5000之间)', {icon: 5});
                $("input[name='addedMoney']").val(1);
                initTotal();
                return false;
            }
            $("#formDemoSub").attr('disabled',true);
            param.pid = [[${projectId}]];
            $.ajax({
                url: "/web/order/saveProjectOrderNoProvide",
                type: "post",
                data: param,
                success: function (data) {
                    console.log(data)
                    var data = data.data;
                    window.location.href = "/web/project_order_pay?orderId=" + data.id;
                }
        })
        return false;
    });
    //刷新总计
    initTotal();

    function initTotal() {
        var add = $("input[name='addedMoney']").val();
        if (!((/^\d+$/).test(add))) {
            $("input[name='addedMoney']").val("0")
            layer.msg('打赏金额需要为正整数(0~5000)', {icon: 5});
            return false;
        }
        if (add > 5000) {
            layer.msg('打赏金额应在0~5000之间)', {icon: 5});
            $("input[name='addedMoney']").val(5000);
        }
        add = $("input[name='addedMoney']").val();
        var total = parseInt(add)+parseInt(reward.support);
        $("#total").find("span").text(total);
    }

    $("input[name='addedMoney']").keyup(function () {
        initTotal();
    });
    })
    ;

</script>
</body>
</html>